<template>
  <div class="handlearea">
    <!-- 头像 -->
    <div class="handleimg">
      <div class="handlesign">
        <div class="signimg">
          <img src="../image.jpg" alt="" />
        </div>
        <div class="signname">
          <h4>
            <router-link to="">萝卜咯</router-link>
          </h4>
          <p>
            <router-link to="">Lv.7</router-link>
          </p>
          <router-link to=""><div class="buttonqian">签到</div></router-link>
        </div>
      </div>
      <div class="attention">
        <ul class="fst">
          <li class="fstli">
            <span>1</span>
            <div>动态</div>
          </li>
          <li class="fstsorang">
            <span>2</span>
            <div>关注</div>
          </li>
          <li class="lst">
            <span>0</span>
            <div>粉丝</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="settled">
      <div class="complete">
        <h3>入驻歌手</h3>
        <router-link to="/discover/artist">查看全部 ></router-link>
      </div>
      <div class="singerlist">
        <ul class="singerul">
          <li class="singerli" v-for="Singer in SettleSinger" :key="Singer.id">
            <div class="signerimg">
              <img :src="Singer.picUrl" alt="" />
            </div>
            <div class="signername">
              <h4>
                <router-link to="">{{ Singer.name }}</router-link>
              </h4>
              <p>
                <router-link to="">{{ Singer.alias[0] }}</router-link>
              </p>
            </div>
          </li>
        </ul>
        <router-link to=""
          ><button class="musician">申请称为网易云音乐人</button></router-link
        >
      </div>
      <div class="anchor">
        <h3>热门主播</h3>
        <div class="n_djlist">
          <ul class="singerul">
            <li class="j_imgli" v-for="item in simiList" :key="item.id">
              <div class="j_img">
                <img :src="item.avatarUrl" alt="" lazy-load />
              </div>
              <div class="j_imagename">
                <router-link class="j_imagena" to="">{{
                  item.nickName
                }}</router-link>
                <p>{{ item.rcmdtext }}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getSettleSinger } from '@/api/RecommendList'
import { mapState, mapActions } from 'vuex'

export default {
  name: 'Recommend',
  data() {
    return {
      // 入驻歌手
      SettleSinger: []
    }
  },
  async mounted() {
    this.getArtistlist()
    const { artists } = await getSettleSinger()
    this.SettleSinger = artists
  },
  methods: {
    // vux数据逻辑
    ...mapActions('simi', ['getArtistlist'])
  },

  computed: {
    ...mapState('simi', ['simiList'])
  }
}
</script>

<style lang="less" scoped>
.handleimg {
  padding: 20px 0px 0px 0px;
}
.handlesign {
  display: flex;
}
.signimg {
  width: 80px;
  height: 80px;
  margin-left: 20px;
  padding: 2px;
  img {
    width: 80px;
    height: 80px;
  }
}
.signname {
  margin-left: 18px;
  padding: 3px 0px 0px;
  width: 115px;
  h4 a {
    font-size: 14px;
    color: #333333;
  }
  p {
    margin: 5px 0px 0px;
  }
  p a {
    display: block;
    width: 40px;
    height: 17px;
    font-size: 12px;
    border: 1px solid #ccc;
    margin-bottom: 15px;
    border-radius: 8px;
    text-align: center;
    color: #999;
  }
  button {
  }
}
.attention {
  margin: 22px 0px 0px 20px;
}
.fst {
  display: flex;
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;

  li {
    height: 40px;
  }
  span {
    font-size: 20px;
  }
  div {
    font-size: 12px;
  }
}
.fstli {
  padding-right: 18px;
  border-right: 1px solid #ccc;
}
.fstsorang {
  padding: 0px 18px;
  border-right: 1px solid #ccc;
}
.lst {
  padding-left: 18px;
}
.settled {
  margin: 0 20px;
  margin-top: 15px;
}
.complete {
  a {
    display: block;
  }
  width: 210px;
  height: 24px;
  line-height: 24px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  h3 {
    font-size: 12px;
  }
}
.singerli {
  width: 210px;
  margin-top: 14px;
  display: flex;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  .signerimg {
    width: 62px;
    height: 62px;
    img {
      width: 62px;
      height: 62px;
    }
  }
  .signername {
    height: 62px;
    margin-left: 14px;
    h4 {
      width: 120px;
      font-size: 14px;
      margin-top: 8px;
    }
    p {
      width: 120px;
      margin-top: 8px;
    }
  }
}
.musician {
  margin-top: 20px;
  width: 210px;
  height: 31px;
  padding-right: 5px;
}
.anchor {
  margin-top: 30px;
  h3 {
    width: 210px;
    height: 24px;
    font-size: 12px;
    border-bottom: 1px solid #ccc;
  }
}
.j_img {
  img {
    width: 40px;
    height: 40px;
  }
}
.j_imgli {
  width: 210px;
  display: flex;
}
.j_imagename {
  line-height: 15px;
  padding-left: 10px;
  .j_imagena {
    width: 160px;
    color: #333;
  }
  p {
    color: #666;
  }
}
.buttonqian {
  background-color: #3282ce;
  width: 100px;
  height: 31px;
  padding-right: 5px;
  text-align: center;
  line-height: 31px;
  color: #fff;
  border-radius: 5px;
}
</style>
